<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <title>Document</title>
    <style>
        .form-control {
            width: 500px;
        }

        form {
            margin: 0 auto;
        }
    </style>
    <script src="./js/vue.js"></script>
    <!-- <script src="./js/bootstrap.min.js"></script> -->
    <!-- <script src="../../js/jquery.min.js"></script> -->

</head>

<body>
    <div id="app">
        <form role="form">
            <div class="form-group">
                <label for="name">用户名</label>
                <input type="text" class="form-control" placeholder="文本输入" v-model="name" name="test">
                <label for="name">留言</label>
                <input type="text" class="form-control" placeholder="文本输入" v-model="text" name="test">
            </div>
            <button @click.prevent="add">发送</button>
        </form>

        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>留言</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in arr">
                    <td>{{item.name}}</td>
                    <td>{{item.text}}</td>
                    <td>{{item.ctime | time}}</td>
                    <td><input type="checkbox" v-model="item.pool"></td>
                </tr>                  
             </tbody>          
         </table>    
         <button @click="del">删除</button>
         <button @click.prevent="all">全选</button>

    </div>
    <script>
        Vue.filter("time",function(dataStr){
            var dt=new Date(dataStr);
            var yy=dt.getFullYear();
            var MM=dt.getMonth()+1;
            var dd=dt.getDate();
            var hh=dt.getHours();
            var mm=dt.getMinutes();
            var ss=dt.getSeconds();
            return `${yy}-${MM}-${dd} ${hh}:${mm}:${ss}`
        })
        new Vue({
            el:"#app",
            data:{
                name:"",
                text:"",
                arr:[],
               

            },
            methods: {
             add(){
                 var tmp={
                     name:this.name,
                     text:this.text,
                     ctime:new Date(),
                     pool:false
                 }
                 this.arr.push(tmp)
             },
             del(){
               var result=this.arr.filter((item,index)=>{
                    if(!item.pool){//pool==true时候
                       return item //返回剩下的数据
                    }
                    
                 })
                 this.arr=result
             },
             all(){
                this.arr.forEach((item,index) => {
                });

             }
            },
        })    
    </script>
    
</body>
</html>